<template>

  <el-main>
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow">新增</el-button>
    <!--数据表格-->
    <el-table 
    style="margin-top: 10px"
    :data="menuList" 
    :height="tableHeight" 
    row-key="id"
    default-expand-all
    :tree-props="{ children: 'children' }"
    :border="true"
    stripe >
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
          <el-tag type="success" v-else-if="scope.row.type == '1'" size="normal">菜单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>

      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" size="small" @click="editMenu(scope.row)">编辑</el-button>
          <el-button icon="el-icon-delete" type="danger" size="small" @click="deleteMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <system-dialog
      :title="menuDialog.title"
      :visible="menuDialog.visible"
      :width="menuDialog.width"
      :height="menuDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          ref="menuForm"
          :model="menu"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
        <el-row>
          <el-col :span="24">
            <el-form-item prop="type" label="菜单类型">
              <el-radio-group v-model="menu.type">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="parentName" size="small" label="所属菜单">
          <el-input
          @click.native="selectParentMenu"
          v-model="menu.parentName"
          :readonly="true"
        ></el-input>
        </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称">
             <el-input v-model="menu.label"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单图标">
            <my-icon @selecticon="setIcon" ref="child"></my-icon>
          </el-form-item>
          <el-form-item
            prop="name"
            v-if="menu.type == 1"
            size="small"
            label="路由名称"
          >
          <el-input v-model="menu.name"></el-input>
          </el-form-item>
          <el-form-item
            prop="path"
            v-if="menu.type != 2"
            size="small"
            label="路由地址"
          >
          <el-input v-model="menu.path"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="menu.code"></el-input>
          </el-form-item>     
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="menu.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <system-dialog
      :title="parentDialog.title"
      :visible="parentDialog.visible"
      :width="parentDialog.width"
      :height="parentDialog.height"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
    >
      <div slot="content">
        <el-tree
          style="font-size: 14px"
          ref="parentTree"
          :data="parentMenuList"
          node-key="id"
          :props="defaultProps"
          empty-text="暂无数据"
          :show-checkbox="false"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
        <div class="customer-tree-node" slot-scope="{ node, data }">
          <span v-if="data.children.length == 0">
            <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px"/>
          </span>
          <span v-else @click.stop="openBtn(data)">
            <svg-icon v-if="data.open" icon-class="add-s"/>
            <svg-icon v-else icon-class="sub-s"/>
          </span>
          <span style="margin-left: 3px">{{ node.label }}</span>  
        </div>
        </el-tree>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
import menuApi from '@/api/menu';
// 导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue'
import { elementIcons } from "@/utils/icons";
import MyIcon from '@/components/system/MyIcon.vue'
export default {
  name: 'menuList',
  // 组件注册
  components: {
    SystemDialog,
    MyIcon,
  },
  data() {
    return {
      parentDialog: {
        title: '选择所属菜单',
        width: 280,
        height: 450,
        visible: false
      },
      defaultProps:{
        children: 'children',
        label: 'label'
      },
    // 查询条件
      searchModel: {
        name: '',
        pageNo: 1,
        pageSize: 10
      },
      menuDialog: {
        title: "",
        visible: false, // 是否显示
        width: 630,
        height: 270
      },
      menuForm: {
        menuName: '',
        menuDescription: ''
      },
      menu: {
        id: "",
        type: "",
        parentId: "",
        parentName: "",
        label: "",
        icon: "",
        name: "",
        path: "",
        url : "",
        code: "",
        orderNum: "",
      },
      rules: {
        type: [{ required: true, trigger: "change", message: "请选择菜单类型" }],
        parentName: [{ required: true, trigger: "change", message: "请选择所属菜单"}],
        label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
        name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
        path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
        url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
        code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
      },
      menuList: [], // 数据列表
      tableHeight: 0, // 表格高度
      parentMenuList: [],
      iconList: [],//图标列表
      userChooseIcon: "",//用户选中的图标
      pageNo: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总数量
      currentIndex: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 180
    })
  },
  created() {
    // 调用查询权限列表的方法
    this.search();
    this.getIconList();
  },
  methods: {
    /**
    * 弹窗取消事件
    */
    onClose() {
      // 关闭窗口
      this.menuDialog.visible = false
    },
    /**
    * 弹窗确认事件
    */
    onConfirm() {
      // 表单验证
      this.$refs.menuForm.validate(async (valid) => {
        // 如果验证通过
        if (valid) {
          let res = null;
          if (this.menu.id === "") {
            res = await menuApi.addMenu(this.menu);
          }else{
            res = await menuApi.updateMenu(this.menu);
          }
          if (res.success) {
            this.$message.success(res.message);
            window.location.reload();
            this.menuDialog.visible = false;
          }else{
            this.$message.error(res.message);
          }
        }
      })
    },
    async selectParentMenu() {
      this.parentDialog.visible = true;
      let res = await menuApi.getParentMenuList();
      if (res.success) {
        this.parentMenuList = res.data;
      }
    },
    onParentClose(){
      this.parentDialog.visible = false //关闭窗口
    },
    onParentConfirm() {
      this.parentDialog.visible = false //关闭窗口
    },
    openBtn(data){
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    },
    handleNodeClick(data) {
      this.menu.parentId = data.id;
      this.menu.parentName = data.label;
    },
    editMenu(row){
      this.$objCopy(row, this.menu);
      this.menuDialog.title = "编辑菜单";this.menuDialog.visible = true;
      this.$nextTick(() => {
        this.$refs["child"].userChooseIcon = row.icon;//菜单图标回显
      })
    },
    async deleteMenu(row){
      let result = await menuApi.checkPermission({ id: row.id });
      if (!result.success) {
        this.$message.warning(result.message);
      }else{
        let confirm =await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          let res = await menuApi.deleteById({ id: row.id });
          if (res.success) {
            this.$message.success(res.message);
            this.search();
          }else{
            this.$message.error(res.message);
          }
        }
      }
    },
    /**
    * 打开添加权限窗口
    */
    openAddWindow() {
      this.$resetForm("menuForm", this.menu); //清空表单数据
      this.menuDialog.title = "新增菜单"; //设置窗口标题
      this.menuDialog.visible = true; //显示窗口
      this.$nextTick(() => {
        this.$refs["child"].userChooseIcon = "";//清空菜单图标
      })
    },
    getIconList(){
      this.iconList = elementIcons;
    },
    setIcon(icon) {
      this.menu.icon = icon;
    },
    async search() {
      let res = await menuApi.getMenuList();
      if(res.success){
        this.menuList = res.data;
      }
    },
    resetValue() {
      // 清空查询条件
      this.searchModel.name = ''
      // 重新查询
      this.search()
    }
  }

}

</script>


<style lang="scss" scoped>
  .iconList {
    width: 400px;height: 300px;
    overflow-y: scroll;overflow-x: hidden;
    display: flex;justify-content: space-around;flex-wrap: wrap;
    i {
      display: inline-block;
      width: 60px;
      height: 45px;
      color: #000000;
      font-size: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      line-height: 45px;
      margin: 5px;
      &:hover {
        color: orange;
        border-color:orange;
      }
    }
  }

  .chooseIcons{
    width: 175px;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 33px;
    line-height: 25px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>